<template>
    <!-- 作业管理-班会管理 -->
    <div class="empReward">
        <div class="top">
            <div class="search">
                <div class="list">
                    <DatePicker type="daterange" :clearable="false" placeholder="开始时间   -   结束时间" style="width: 200px"
                        v-model="value" @on-change="getTime"></DatePicker>
                </div>
                <!-- <div class="list">
                    <Input placeholder="人员姓名搜索" style="width:150px" v-model="keyword" clearable />
                </div> -->
                <div class="list" @click="onSerch">
                    <Button type="primary">搜索</Button>
                </div>
                <div class="list" @click="onReset">
                    <Button>重置</Button>
                </div>
            </div>
            <div class="down">
                <el-button type="primary" @click="updateRow(0)" size="small" plain>添加班会</el-button>
            </div>
        </div>
        <div class="bottom">
            <div class="table">
                <el-table :data="list" :height="tableHeight" :stripe="true" style="width: 100%">
                    <el-table-column prop="meetingName" label="班会名称" width="150"></el-table-column>
                    <el-table-column prop="planName" label="工作计划" min-width="150"></el-table-column>
                    <el-table-column prop="meetingType" label="班会类型" width="100">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.meetingType == 1" size="small">班前会</el-tag>
                            <el-tag v-if="scope.row.meetingType == 2" size="small">班后会</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="participants" label="参会人员" min-width="100">
                        <template slot-scope="scope">
                            <span v-for="(item,index) in scope.row.participants">
                                {{((index != 0 ? ',' : '') + item)}}
                            </span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="description" label="班前会资料" width="100"></el-table-column> -->
                    <el-table-column prop="filePath" label="交底视频" align="center" >
                        <template slot-scope="scope">
                            <el-link v-if="scope.row.filePath" target="_blank" :href="'http://111.120.11.161:8900/'+scope.row.filePath" type="primary" >查看视频</el-link>
                            <el-link v-else type="info" :underline="false" >无</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createUser" label="创建人" width="100"></el-table-column>
                    <!-- <el-table-column prop="phone" label="联系方式" width="120"></el-table-column> -->
                    <el-table-column prop="createTime" label="创建时间" width="110"></el-table-column>
                    <!-- <el-table-column prop="createUser" label="最近修改人" width="100"></el-table-column> -->
                    <!-- <el-table-column prop="createTime" label="最近修改时间" width="110"></el-table-column> -->
                    <el-table-column label="操作" align="center" fixed="right" min-width="120">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="onDataTable(scope.row)">班会资料</el-button>
                            <!-- <el-button type="text" size="small" @click="onPersonnelTable(scope.row)">签到人员</el-button> -->
                            <!-- <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" >
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current"
                        :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer
                        @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                </div>
            </div>
        </div>

        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="updateModal" title="添加班会" width="520px" :mask-closable="false">
            <div class="item">
                <span class="tip">*</span>
                <span>{{MeetingRadio == 1 ? '班前会' : '班后会'}}名称:</span>
                <Input v-model="MeetingName" type="text" :placeholder="('请输入' + (MeetingRadio == 1 ? '班前会' : '班后会') + '名称')"
                    style="width: 300px" show-word-limit />
            </div>
            <div class="item">
                <span class="tip">*</span>
                <span>关联计划:</span>
                <Select v-model="jhValue" style="width:300px" placeholder="请选择关联计划" :filterable="true"
                    @on-change="getJhType">
                    <Option v-for="item in PlanWorkList" :value="item.id" :key="item.id">{{ item.planName }}</Option>
                </Select>
            </div>
            <div class="item">
                <span class="tip">*</span>
                <span>{{MeetingRadio == 1 ? '班前会' : '班后会'}}时间:</span>
                <el-date-picker v-model="MeetingTime" type="datetime"
                    :placeholder="('请选择' + (MeetingRadio == 1 ? '班前会' : '班后会'))" style="width: 300px"></el-date-picker>
            </div>
            <div class="item">
                <span class="tip">*</span>
                <span>选择会议类别:</span>
                <div class="radio" style="width:250px;">
                    <!-- 会议类别，1 代表班前会，2 代表班后会，可根据实际情况调整 -->
                    <el-radio-group v-model="MeetingRadio">
                        <el-radio :label="1">班前会</el-radio>
                        <el-radio :label="2">班后会</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="item">
                <span class="tip">*</span>
                <span>参会人员:</span>
                <el-select v-model="chryValue" style="width:300px;" multiple collapse-tags placeholder="请选择" :filterable="true">
                    <el-option v-for="item in participantsList" :key="item.emp_id" :label="item.name"
                        :value="item.emp_id"></el-option>
                </el-select>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <el-drawer title="班会资料列表" :visible.sync="tableData" direction="rtl" size="70%">
            <el-table :data="gridData">
                <el-table-column property="fileName" label="文件名称"></el-table-column>
                <el-table-column property="userName" label="创建人"></el-table-column>
                <el-table-column property="uploadTime" label="上传时间"></el-table-column>
                <el-table-column property="downloadUrl" label="附件文件">
                    <template slot-scope="scope">
                        <el-link v-if="scope.row.downloadUrl" target="_blank" :href="scope.row.downloadUrl" type="primary" >附件</el-link>
                        <el-link v-else type="info" :underline="false" >附件</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
        <el-drawer title="班会签到人员" :visible.sync="tablePersonnel" direction="rtl" size="70%">
            <el-table :data="gridPersonnel">
                <el-table-column property="name" label="姓名"></el-table-column>
                <el-table-column property="gender" label="性别">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.gender == 1">男</el-tag>
                        <el-tag v-if="scope.row.gender == 2">女</el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="position" label="岗位 / 工种"></el-table-column>
                <el-table-column property="hardwareNumber" label="硬件编号"></el-table-column>
                <el-table-column property="signStatus" label="是否签到">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.signStatus == 1" type="success">已签到</el-tag>
                        <el-tag v-if="scope.row.signStatus == 2" type="danger">未签到</el-tag>
                    </template>
                </el-table-column>
                <!-- <el-table-column property="downloadUrl" label="附件文件">
                    <template slot-scope="scope">
                        <el-link v-if="scope.row.downloadUrl" target="_blank" :href="scope.row.downloadUrl" type="primary" >附件</el-link>
                        <el-link v-else type="info" :underline="false" >附件</el-link>
                    </template>
                </el-table-column> -->
            </el-table>
        </el-drawer>
    </div>
</template>

<script>
    import {
        getEmpRewardList,
        getEmpRewardAdd,
        getEmpRewardDel,
        getAllPersonnelList,
        getSelectValue
    } from "@/api/api.js";
    import {
        apiClassMeetingList,
        apiWorkPlanWorkList,
        apiWorkPlanWorkPageList,
        apiClassMeetingQueryEntryerId,
        apiClassMeetingSaveClassMeeting,
        apiFileList,
        apiClassMeetingQuerycheckInList
    } from "@/api/apifox.js";
    export default {
        data() {
            return {
                current: 1,
                pageSize: 10,
                pageNum: 1,
                totalCount: "",
                corpType: "",
                projectId: "",
                keyword: "",
                list: [],
                corpList: [],
                updateModal: false,
                isAdd: true,
                removeId: "",
                deleteModal: false,
                btnList: [],
                deptName: "",
                startDate: "",
                endDate: "",
                value: [],
                empList: [],
                empName: "",
                date: "",
                tableHeight: window.innerHeight - 355,
                radio: "",
                description: "",
                labelByValue: {},

                PlanWorkList: [], // 计划列表

                jhValue: '', // 关联计划ID
                workPlanItem: '', // 关联的工作计划ID（必填）
                MeetingName: '', // 班前会名称
                MeetingTime: '', // 班前会时间
                MeetingRadio: 1, // 会议类别，1 代表班前会，2 代表班后会，可根据实际情况调整
                chryValue: '', // 参会人员ID列表

                participantsList: [], // 参会人员列表

                tableData: false,
                gridData: [],
                tablePersonnel: false,
                gridPersonnel: [],
            };
        },
        computed: {
            porjectObject() {
                return this.$store.state.porjectObject;
            }
        },
        watch: {
            porjectObject(val, oldVal) {
                if (val.deptId != oldVal.deptId) {
                    this.projectId = val.deptId;
                    this.deptName = val.name;
                    this.pageNum = 1;
                    this.current = 1;
                    this.keyword = "";
                    this.value = [];
                    this.getAllList();
                    this.getEmpList();
                }
            }
        },
        methods: {
            /* 班会资料列表 */
            onDataTable(row) {
                apiFileList({
                    id: row.id // 班会id
                }).then(res => {
                    if (res.code == 200) {
                        this.gridData = res.data
                        this.tableData = true;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            /* 签到人员列表 */
            onPersonnelTable(row) {
                apiClassMeetingQuerycheckInList({
                    id: row.id // 班会id
                }).then(res => {
                    if (res.code == 200) {
                        this.gridPersonnel = res.data
                        this.tablePersonnel = true;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            //获取所有请求
            getEmpList() {
                apiWorkPlanWorkList().then(res => {
                    if (res.code == 200) {
                        // 筛选出 auditStatus 等于 2 的数据
                        let filteredList = res.data.filter(item => item.auditStatus == 2);
                        this.PlanWorkList = filteredList
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });

                apiClassMeetingQueryEntryerId({
                    leaderFlag: '',
                    empNames: [],
                    deptId: this.projectId, // 项目id
                }).then(res => {
                    if (res.code == 200) {
                        this.participantsList = res.data
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
                /* let params = {
                    deptId: this.projectId
                };
                getAllPersonnelList(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.empList = res.data.list;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    }); */
            },
            getJhType(index) {
                this.jhValue = index;
                this.PlanWorkList.forEach(e => {
                    if (index == e.id) {
                        this.workPlanItem = e;
                    }
                });
            },
            getAllList() {
                let params = {
                    pageSize: this.pageSize, // 分页大小
                    pageNum: this.pageNum, // 分页页码
                    keyword: this.keyword,
                    // projectId: this.projectId,
                    startTiem: this.startDate, // 开始时间
                    endTiem: this.endDate, // 结束时间
                    createUserId: [], // 创建人Id
                    isExit: '', // 是否离场 1到场 2离场
                };
                apiClassMeetingList(params).then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
                /* getEmpRewardList(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.list = res.data.list;
                            this.totalCount = res.data.total;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    }); */
            },
            getTime(value) {
                this.startDate = value[0];
                this.endDate = value[1];
                // this.pageNum = 1;
                // this.current = 1;
                // this.getAllList();
            },
            // onSearch() {
            //     this.pageNum = 1;
            //     this.current = 1;
            //     this.getAllList();
            // },

            onSerch() {
                this.pageNum = 1;
                this.current = 1;
                this.getAllList();
            },
            onReset() {
                this.value = []
                this.startDate = null
                this.endDate = null
                this.keyword = null
                this.pageNum = 1;
                this.current = 1;
                this.getAllList();
            },
            pageChange(index) {
                this.pageNum = index;
                this.getAllList();
            },
            pageSizeChange(index) {
                this.pageSize = index;
                this.getAllList();
            },
            updateRow() {
                this.jhValue = ''; // 关联计划ID
                this.workPlanItem = ''; // 关联的工作计划ID（必填）
                this.MeetingName = ''; // 班前会名称
                this.MeetingTime = ''; // 班前会时间
                this.MeetingRadio = 1; // 会议类别，1 代表班前会，2 代表班后会，可根据实际情况调整
                this.chryValue = ''; // 参会人员ID列表

                this.updateModal = true;
                this.empId = "";
                this.empName = "";
                this.date = "";
                this.radio = 1;
                this.description = "";
            },
            onEdit() {
                this.jhValue = ''; // 关联计划ID
                this.workPlanItem = ''; // 关联的工作计划ID（必填）
                this.MeetingName = ''; // 班前会名称
                this.MeetingTime = ''; // 班前会时间
                this.MeetingRadio = 1; // 会议类别，1 代表班前会，2 代表班后会，可根据实际情况调整
                this.chryValue = ''; // 参会人员ID列表

                // this.updateModal = true;
            },
            getDate(value) {
                this.date = value;
            },
            submitAll() {
                if (this.jhValue == '') {
                    this.$Message.warning('请选择关联计划！');
                    return
                }
                if (this.MeetingName == '') {
                    this.$Message.warning('请输入班会名称！');
                    return
                }
                if (this.MeetingTime == '') {
                    this.$Message.warning('请选择班会时间！');
                    return
                }
                if (this.MeetingRadio == '') {
                    this.$Message.warning('请选择会议类别！');
                    return
                }
                if (this.chryValue == '') {
                    this.$Message.warning('请选择参会人员！');
                    return
                }

                let param = {
                    planId: this.jhValue, // 关联计划ID
                    meetingName: this.MeetingName, // 班前会名称
                    meetingTime: this.MeetingTime, // 班前会时间
                    meetingType: this.MeetingRadio, // 会议类别，1 代表班前会，2 代表班后会，可根据实际情况调整
                    participantIds: this.chryValue, // 参会人员ID列表
                };
                apiClassMeetingSaveClassMeeting(param).then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.updateModal = false;
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            remove(index, rows) {
                this.removeId = rows[index].id;
                this.deleteModal = true;
            },
            detele() {
                getEmpRewardDel(this.removeId)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.getAllList();
                            this.deleteModal = false;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },

            cancel(type) {
                if (type == 1) {
                    this.updateModal = false;
                } else if (type == 2) {
                    this.deleteModal = false;
                }
            },
            //改动
            selectValue() {
                let params = {
                    code: "reward_type"
                };
                const _this = this;
                getSelectValue(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.itemList = res.data.childList;
                            let province_list = {};
                            for (let i = 0; i < this.itemList.length; i++) {
                                province_list[this.itemList[i].code] = this.itemList[i].name;
                            }
                            this.labelByValue = province_list;
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
        },
        created() {
            this.selectValue(); //改动 初次加载下拉数据
        },
        mounted() {
            this.projectId = this.$store.state.porjectObject.deptId;
            this.deptName = this.$store.state.porjectObject.name;
            this.getAllList();
            this.getEmpList();
            this.btnList = JSON.parse(localStorage.getItem("arr"));
        }
    };
</script>

<style scoped lang="less">
    // @import "./../../assets/style/emp_common.less";
    @import "./../../assets/style/themeBase.less";

    .empReward {
        width: 100%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
        background: #f5f5f5;

        .top {
            width: 100%;
            height: 72px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .search {
                width: auto;
                margin-left: 20px;
                padding-top: 20px;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .list {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-bottom: 20px;
                    margin-right: 20px;

                    span {
                        width: 70px;
                    }
                }
            }

            .down {
                width: auto;
                margin-right: 20px;
            }
        }

        .bottom {
            width: 100%;
            padding: 20px;
            margin-top: 10px;
            box-sizing: border-box;
            height: calc(100% - 82px);
            background: #fff;
            border-radius: 10px;

            .down {
                width: 98%;
                margin: 0 auto;
                margin-top: 20px;
            }

            .msg {
                margin-bottom: 20px;
                display: flex;
                flex-wrap: wrap;

                .list {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-right: 24px;

                    p {
                        margin-right: 10px;
                        font-size: 16px;
                        color: #000;

                        &:nth-child(2) {
                            color: red;
                        }
                    }
                }
            }

            .updateCorp {
                cursor: pointer;
                margin-left: 5px;
                padding: 2px 4px;
                font-size: 12px;
                font-weight: 400;
                line-height: 1;
                color: #ffffff;
                border-radius: 3px;
                background-color: var(--themeColor);
            }
        }
    }

    .item {
        width: 400px;
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        position: relative;
        margin-bottom: 20px;
        padding-left: 16px;
        box-sizing: border-box;

        .radio {
            width: 300px;
            display: flex;
            justify-content: center;
        }

        .tip {
            position: absolute;
            top: 8px;
            left: 0;
            color: red;
            font-size: 16px;
        }
    }

    // /deep/.ivu-icon-ios-close{
    //     color: #fff;
    //     &:hover{
    //         color: #fff;
    //     }
    // }



    /deep/.ivu-input-group {
        border-radius: 20px;
    }

    /deep/.ivu-input-group .ivu-input {
        border-radius: 20px 0 0 20px;
        border-color: #EBF2F8;
        background: #EBF2F8;
    }

    /deep/.ivu-input-group-append {
        border-radius: 0 20px 20px 0;
    }

    /deep/.el-tag.el-tag--success {
        background-color: #E7F8F2;
        border-color: #28D79C;
        color: #3FCF77;
    }

    /deep/.el-tag {
        border-radius: 2px;
    }

    /deep/.ivu-select-selection {
        border-radius: 2px;
    }

    /deep/.el-tag.el-tag--info {
        background-color: rgba(255, 72, 72, 0.1);
        border-radius: 2px;
        border-color: #FF4848;
        color: #FF4848;
    }
</style>
